<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.name" placeholder="运营商名称" style="width: 220px;"></el-input>
        <el-input clearable v-model="search.orderNum" placeholder="订单号" style="width: 220px;margin-left:5px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="10%" align="center" label="运营商名称">
        <template slot-scope="scope">
          <span>
              {{scope.row.nickName}}
          </span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" align="center" label="电话">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      
      <el-table-column min-width="10%" align="center" label="所属区域">
        <template slot-scope="scope">
          <span>
              {{scope.row.areaName}}
          </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="15%" align="center" label="订单号">
        <template slot-scope="scope">
          <span>{{ scope.row.agentOrdeNum }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="金额">
        <template slot-scope="scope">
          <span>{{ (scope.row.money/100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="支付状态">
        <template slot-scope="scope">
          <el-tag :type="(scope.row.isPay?'success':'info')">{{ (scope.row.isPay?'已支付':'未支付') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="审核状态">
        <template slot-scope="scope">
          <el-tag :type="parseStateClass(scope.row.checkType)">{{ scope.row.checkType | parseAgentCheckState}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="审核说明">
        <template slot-scope="scope">
          <span>{{ scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="时间">
        <template slot-scope="scope">
            <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  min-width="10%">
        <template slot-scope="scope">
            <el-button type="primary" @click="handleCheck(scope.row.id)" v-if="scope.row.checkType==0">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />

    <el-dialog title="修改配置" :visible.sync="dialog.visible"  width="700px">
        <div class="ci">
          <div class="item">
            <span class="name">运营商名称</span>
            <span class="value">
                {{dialog.data.name}}
            </span>
          </div>
          <div class="item">
            <span class="name">电话</span>
            <span class="value">
              {{dialog.data.phone}}
            </span>
          </div>
          <div class="item">
            <span class="name">是否全市</span>
            
             <span class="value">
              <el-switch  v-model="dialog.data.isCity"  active-color="#13ce66"  inactive-color="#ff4949"></el-switch>
              {{(dialog.data.isCity?'是':'否')}}
            </span>
          </div>
          <div class="item">
            <span class="name required">结果</span>
            <span class="value">
                <el-select v-model="dialog.data.checkType" clearable placeholder="状态" style="width: 130px;">
                  <el-option 
                  v-for="(item,index) in selectOptions.checkType"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
            </span>
          </div>
          <div class="item h100" v-show="dialog.data.checkType>1">
            <span class="name required">说明</span>
            <span class="value">
              <el-input clearable type="textarea" rows="4" v-model="dialog.data.remark" maxlength="100" placeholder="拒绝原因简要说明" style="width:100%;"></el-input>
            </span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">取 消</el-button>
            <el-button type="primary" @click="saveCheckState()" :loading="dialog.saveloading">确 定</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as agentApi from '@/api/agent'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import guid from '@/utils/guid'
import * as enumHelper from '@/utils/enum'


export default {
  name: 'AgentAreaCheck',
  components: { Pagination },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        name:'',
        orderNum:'',
      },
      search:{
        name:'',
        orderNum:'',
      },
      nationals:[],
      selectOptions:{
         checkType:[

         ]
      },
      dialog:{
          visible:false,
          saveloading:false,
          //数据
          data:{
            id:'',
            name:'',
            phone:'',
            checkType:'',
            remark:'',
            isCity:false,
          }
      },
    }
  },
  created(){
      var that=this;
      that.getList();
      for(var key in enumHelper.agent.checkType){
          if(enumHelper.agent.checkType.hasOwnProperty(key) && typeof(enumHelper.agent.checkType[key])=='number'){
            that.selectOptions.checkType.push({
              label:enumHelper.agent.checkType.getName(enumHelper.agent.checkType[key]),
              value:enumHelper.agent.checkType[key]
            });
          }
      }
  },
  mounted(){

  },
  filters:{
    parseAgentCheckState(val){
        return enumHelper.agent.checkType.getName(val);
    }
  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      agentApi.getAreaApplyList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
         }
      })

    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.name=that.search.name.trim();
      that.listQuery.orderNum=that.search.orderNum.trim();
      that.getList();
    },
    parseStateClass(val){
      return ['info','success','danger','warning','danger'][val];
    },
    handleCheck(id){
        var that=this;
        that.dialog.visible=true;
        var idx=that.list.findIndex(item=>item.id==id);
        if(idx>-1){
            that.dialog.data.name=that.list[idx].nickName;
            that.dialog.data.phone=that.list[idx].phone;
            that.dialog.data.id=that.list[idx].id;
            that.dialog.data.isCity=false;
            that.dialog.data.remark='';
        }
    },
    saveCheckState(){
        var that=this;
        if(!that.dialog.data.checkType){
          that.$message({
                message:'请选择审核结果',
                type:'warning'
            });
            return;
        }
        var ct=parseInt(that.dialog.data.checkType);
        if(ct>1 && !that.dialog.data.remark.trim()){
            that.$message({
                message:'请填写拒绝原因',
                type:'warning'
            });
            return;
        }
        that.dialog.saveloading=true;
        var data={
            id:that.dialog.data.id,
            remark:that.dialog.data.remark.trim(),
            checkType:that.dialog.data.checkType,
            isCity:that.dialog.data.isCity
        }
        agentApi.saveAgentAreaApplyState(data).then(res=>{
            if(res.data){
                that.$message({
                    message:'保存成功',
                    type:'success'
                });
                var idx=that.list.findIndex(item=>item.id==data.id);
                if(idx>-1){
                    that.list[idx].checkType=data.checkType;
                    that.list[idx].remark=data.remark;
                }
            }
            setTimeout(()=>{
                that.dialog.saveloading=false;
                that.dialog.visible=false;
            },1000)
        }).catch(()=>{
            that.dialog.saveloading=false;
        })
    }
  }
}
</script>
